<template>
  <div>
    <ul class="dianpu_info">
      <li>
        <span class="hong">*</span><span class="jiacu">建筑面积</span>
        <van-field class="m"
          v-model="storeArea"
          name="store_area"
          placeholder="请输入面积"
          :rules="[{ required: true, pattern: num , message: '请输入正确的面积'  }]"
        />
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">租金</span>
        <van-field class="y_y"
          v-model="storeMoney"
          name="store_money"
          placeholder="请输入租金"
          :rules="[{ required: true , pattern: num , message: '请输入正确的租金' }]"
        />
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">押付</span>
        <div class="no_border clearfix">
            <van-field :rules="[{ required: true, message: '请输入押' }]">
                <template #input>
                    押
                    <van-stepper v-model="stepper" @change="onoshitsukeChange" min="0" integer  />
                </template>
            </van-field>
            <van-field :rules="[{ required: true, message: '请输入付' }]">
                <template #input>
                    付
                    <van-stepper v-model="stepperX" @change="onoshitsukeChange" min="0" integer  />
                </template>
            </van-field>
            <van-field class="none"  v-model="oshitsukeV" name="oshitsuke"/>
        </div>
      </li>
      <li class="clearfix">
        <span class="hong">*</span><span class="jiacu">转让费</span>
        <div class="right">是否面议 <van-switch v-model="checked" /></div>
      </li>
      <van-field  v-if="checked" name="store_move_money" value="面议" class="none" />
      <li v-if="!checked" class="zhuangrangfei">
        <van-field class="wy"
            v-model="storeMoveMoney"
            name="store_move_money"
            placeholder="请输入转让费"
            :rules="[{ required: true, pattern: num , message: '请输入正确的转让费' }]"
        />
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">业主姓名</span>
        <van-field
          v-model="storeUser"
          name="store_user"
          placeholder="请输入业主姓名"
          :rules="[{ required: true, pattern: hanzi , message: '请输入正确的姓名' }]"
        />
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">联系电话</span>
        <van-field
          v-model="storePhone"
          name="store_phone"
          placeholder="请输入联系电话"
          :rules="[{ required: true, pattern: phone , message: '请输入正确的联系电话' }]"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CompanyPropertyInfo',
  props: {
    dataL: Object
  },
  data () {
    return {
      storeArea: '',
      storeMoney: '',
      oshitsukeV: '押0付0',
      showOshitsuke: false,
      oshitsukL: [],
      stepper: 0,
      stepperX: 0,
      storeMoveMoney: '',
      checked: true,
      storeUser: '',
      storePhone: '',
      num: /^(0|[1-9][0-9]*)$/,
      hanzi: /[\u4e00-\u9fa5]/,
      phone: /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
    }
  },
  watch: {
    'dataL': function (dataL) {
      this.storeArea = this.dataL.store_area
      this.storeMoney = this.dataL.store_money
      this.oshitsukeV = this.dataL.oshitsuke
      this.stepper = this.dataL.oshitsuke.split('押')[1].split('付')[0]
      this.stepperX = this.dataL.oshitsuke.split('押')[1].split('付')[1]
      if (this.dataL.store_move_money === 0 || this.dataL.store_move_money === '面议') {
        this.checked = true
      } else {
        this.checked = false
        this.storeMoveMoney = this.dataL.store_move_money
      }
      this.storeUser = this.dataL.store_user
      this.storePhone = this.dataL.store_phone
    }
  },
  methods: {
    onoshitsukeChange () {
      this.oshitsukeV = '押' + this.stepper + '付' + this.stepperX
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.dianpu_info
  width 100%
  height auto
  box-shadow 0px 0px 5px 0px rgba(4, 0, 0, 0.1)
  border-radius .1rem /* 5/50 */
  padding 0 .3rem /* 15/50 */
  padding-bottom .5rem /* 25/50 */
  li
    width:100%
    font-size .26rem /* 13/50 */
    padding-top .5rem /* 25/50 */
    .hong
      font-size .22rem /* 11/50 */
      color #F6360A
    .right
      line-height .34rem /* 17/50 */
      display flex
      .van-switch
        width .76rem
        height .34rem
        margin-left .2rem
        border:0px
        background-color:#f8f8f8
        /deep/ .van-switch__node
          height .34rem
          width .34rem
      .van-switch--on
        background linear-gradient(90deg, #F14510, #EE340F)
        /deep/ .van-switch__node
          transform: translateX(.42rem);
  .zhuangrangfei
    padding-top .3rem
    .van-field
      margin-top 0px
  .van-field
    width 100%
    line-height .8rem
    border 1px solid rgba(0,0,0,.1)
    border-radius .1rem /* 5/50 */
    position relative
    margin-top .3rem /* 15/50 */
    padding .1rem /* 5/50 */ .3rem /* 15/50 */
  .van-field:after
    border-bottom:0
  .van-field:before
    position absolute
    font-size .3rem /* 15/50 */
    right .3rem /* 15/50 */
  .van-field.m:before
    content '㎡'
  .van-field.y_y:before
    content '元/月'
  .van-field.wy:before
    content '万元'
  .no_border
    border 1px solid rgba(0,0,0,.1)
    border-radius .1rem /* 5/50 */
    margin-top .3rem /* 15/50 */
    .van-field
      width 50%
      border 0rem /* 0/50 */
      float left
      margin-top 0rem /* 15/50 */
      .van-stepper
        margin-left .4rem /* 20/50 */
    .van-cell::after
      border-bottom 0px
</style>
